<!-- 商品列表组件 <good-list :list="xx"></good-list> -->
<template>
	<view class="good-list" :style="StyleStr">
		<view class="good-li" v-if="tabIndex==0">
			<view class="good-li-item" v-for="(good,index) in list" :key="index" v-if="tabIndex==0" @tap="openProductItem(good)">
				<uni-lazy-image :realSrc="good.taraHunt" :placeholdSrc="placeholdSrc" class="good-img"></uni-lazy-image>
				<view class="good-name">{{good.title}}</view>
				<text class="good-price">{{good.price}} 元</text>
			</view>
		</view>
		<view class="house-li" v-for="(good,index) in list" :key="index" v-if="tabIndex==1" @tap="openProductItem(good)">
			<uni-lazy-image :realSrc="good.taraHunt" :placeholdSrc="placeholdSrc" class="house-img"></uni-lazy-image>
			<view class="flex-item">
				<view class="house-name">{{good.title}}</view>
				<view class="house-subtitle">{{good.subTitle}}</view>
				<view class="house-label" v-if="good.label!=''">
					<text class="house-label-text" v-for="(item,ind) in label" :key="ind" :style="{'background':'rgb('+good.BanckColor+')','color':'rgb('+item.FontColor+')'}">
						{{item.Name}}
					</text>
				</view>
				<text class="house-price">{{good.price}}</text>
			</view>
		</view>
		<view class="good-li" v-if="tabIndex==2">
			<view class="good-li-item" v-for="(good,index) in list" :key="index" v-if="tabIndex==2" @tap="openProductItem(good)">
				<uni-lazy-image :realSrc="good.taraHunt" :placeholdSrc="placeholdSrc" class="good-img"></uni-lazy-image>
				<view class="good-name">{{good.title}}</view>
				<text class="good-price">{{good.price}} 元</text>
			</view>
		</view>
		<view class="child-li" v-if="tabIndex==3" >
			<child-item :list="list" @openChild="openChild"></child-item>
		</view>
		<!-- 猜你喜欢 列表 -->
		<view class="good-li" v-if="tabIndex==4">
			<view class="good-li-item" v-for="(good,index) in list" :key="index" v-if="tabIndex==4" @tap="openGuessProductItem(good)">
				<uni-lazy-image :realSrc="good.thumbnailUrl" :placeholdSrc="placeholdSrc" class="good-img"></uni-lazy-image>
				<view class="good-name">{{good.productName}}</view>
				<text class="good-price">{{good.lowestSalePrice}} 元</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	import UniLazyImage from "@/components/uni-lazy-image/uni-lazy-image"
	import ChildItem from "./child-item.vue"
	export default {
		components: {
			UniLazyImage,
			ChildItem
		},
		computed: {
			...mapState(['hasLogin', 'userinfo', 'isIPX'])
		},
		props: {
			list: {
				type: Array,
				default () {
					return []
				}
			},
			tabIndex: {
				type: Number,
				default () {
					return 0
				}
			},
			StyleStr: {
				type: String,
				default () {
					return ''
				}
			},
			placeholdSrc: {
				type: String,
				default () {
					return '/static/home_image_hold.png'
				}
			}
		},
		methods: {
			/**
			 * 统一跳转接口,拦截未登录路由
			 * navigator标签现在默认没有转场动画，所以用view
			 */
			navTo(url, bol) {
				if (bol) {
					if (!this.hasLogin) {
						url = '/pages/login/login';
						uni.navigateTo({
							url
						})
						return;
					}
					if (this.userinfo.authKey == '') {
						url = '/pages/phonenum/phonenum'
						uni.navigateTo({
							url
						})
						return;
					}
					uni.navigateTo({
						url
					})
				} else {
					uni.navigateTo({
						url
					})
				}
			},
			openProductItem(item) {
				let url = ''
				//console.log(JSON.stitem)
				if (item.infoType == 'product') {
					url = '/pages/product/product?id=' + item.unique
					this.navTo(url, false)
				} else if(item.infoType == 'houses'){
					url = 'https://www.dalinicegroup.com/w/wxxcxpage/goodhouse/buildingdetail.html?id='+item.unique
					this.navTo('/pages/web-view/web-view?url=' + encodeURIComponent(url), false);
				}else{
					uni.showToast({
						title: "此功能正在开发中......",
						duration: 3000,
						mask: true,
						icon: 'none'
					})
				}
			},
			openGuessProductItem(item) {
				let url = '';
				if (item.productId != '') {
					url = '/pages/product/product?id=' + item.productId
					this.navTo(url, false)
				} else {
					uni.showToast({
						title: "此功能正在开发中......",
						duration: 3000,
						mask: true,
						icon: 'none'
					})
				}
			},
			openChild(item){
				console.log(JSON.stringify(item))
				if(item.appLink!=''){
					this.navTo('/pages/web-view/web-view?url=' + encodeURIComponent(item.appLink), false);
				}
			}
		}
	}
</script>

<style lang="scss">
	.good-list {
		display: flex;
		background-color: rgb(244, 245, 246);
		padding: 24upx;
		flex-wrap: wrap;

		.good-li {
			display: flex;
			align-items: center;
			border-bottom: 0upx solid #eee;
			width: 100%;
			justify-content: space-between;
			flex-wrap: wrap;

			.good-li-item {
				display: inline-flex;
				width: 48%;
				height: 480upx;
				justify-content: space-between;
				align-items: flex-start;
				background: white;
				flex-wrap: wrap;
				flex-direction: column;
				margin-bottom: 20upx;
				border-radius: 5upx;

				.good-img {
					display: flex;
					width: 250upx;
					height: 250upx;
					margin: 0 auto;
				}

				.good-name {
					display: flex;
					color: rgb(153, 153, 153);
					padding: 0 24upx 0 24upx;
				}

				.good-price {
					display: flex;
					color: red;
					padding: 0 24upx 0 24upx;
				}

			}
		}

		.house-li {
			display: flex;
			align-items: center;
			background: white;
			border-bottom: 1upx solid #eee;
			width: 100%;

			.house-img {
				width: 160upx;
				height: 160upx;
				padding: 20upx;
			}

			.flex-item {
				flex: 1;

				.house-name {
					font-size: 26upx;
				}

				.house-subtitle {
					font-size: 24upx;
					color: rgb(153, 153, 153);
				}

				.house-price {
					font-size: 26upx;
					color: red;
				}

				.house-label {
					display: flex;

					.house-label-text {
						display: inline-flex;
						margin-right: 12upx;
						border-radius: 50upx;
						height: 45upx;
						line-height: 43upx;
						padding: 0 10upx 0 10upx;
						font-size: 24upx;
					}
				}
			}
		}

		.child-li {
			display: flex;
			align-items: center;
			background: white;
			border-bottom: 1upx solid #eee;
			width: 100%;
			margin-bottom: 12upx;

			.child-img {
				width: 720upx;
				height: 160upx;
			}


		}
	}
</style>
